<template>
  <div class="alarm-panel">
    <div v-for="item in dataList" :key="item.field" class="alarm-box">
      <div>{{ item.label }}</div>
      <div
        class="alarm-round"
        :style="{ background: item.value == 1 ? '#eb5851' : '#72d58c' }"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "alarm-config",
  props: {
    info: {
      type: [Object, null],
      default: () => {},
    },
  },
  data() {
    return {
      dataList: [
        { label: "放药位置", field: "putMedicine", value: 0 },
        { label: "X轴左限", field: "xAxisLeft", value: 0 },
        { label: "X轴右限", field: "xAxisRight", value: 0 },
        { label: "Y轴上限", field: "yAxisUp", value: 0 },
        { label: "Y轴下限", field: "yAxisDown", value: 0 },
        { label: "取药机构", field: "pickUpEquipment", value: 0 },
        { label: "取药窗口", field: "pickUpWindow", value: 0 },
      ],
    };
  },
  watch: {
    info: {
      handler(val) {
        this.dataList.forEach((item) => {
          item.value = val[item.field];
        });
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.alarm-panel {
  width: fit-content;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #72b5f8;
  box-shadow: inset 0 0 10px rgba(64, 160, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  font-size: 14px;
  .alarm-box {
    display: inline-block;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
    .alarm-round {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-top: 5px;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
